<script lang="ts" setup>

const redirectToExternal = () => {
  window.open('https://ngdc.cncb.ac.cn/subcenter/3', '_blank')
}
</script>

<template>
  <el-menu class="el-menu-double" mode="horizontal" :ellipsis="false" router>

    <el-menu-item index="/" class="right-item-1" @click="redirectToExternal">
      <img src='/images/header_logo1.jpg' alt="Logo" class="h-9 w-9">
      <span class="menu-text chinese-title-1">国家基因组科学数据中心中医药分中心</span>
    </el-menu-item>


    <el-menu-item index="/" class="right-item-2" @click="redirectToExternal">
      <img src='/images/header_logo2.jpg' alt="Logo" class="h-9 w-9">
      <span class="menu-text chinese-title-1">中国中医科学院医学实验中心</span>
    </el-menu-item>
  </el-menu>
</template>

<style lang="scss">
.el-menu-double {
  height: 10vh;
  background: #1d4f9c;
  display: flex;
  justify-content: flex-start;
  padding-left: 3%;

  .ep-menu-item {
    padding: 0;
    margin: 0;
    border: none !important;

    &:hover {
      background-color: #2a5fb0 !important;
    }

    &.is-active {
      border-bottom-color: #2a5fb0 !important;
    }
  }

  .left-item {
    margin-right: 0;
  }

  .right-item-1 {
    margin-left: 0;
  }

  .right-item-2 {
    margin-left: 15px;
  }

  .menu-text {
    color: white;
    font-weight: bold;
    padding: 0 5px;
  }

  .chinese-title-1 {
    font-size: 20px; // 调整为16px，原来是1.125rem(18px)
    line-height: 1.2;
  }

  :deep(.el-sub-menu) {
    &:hover {
      background-color: #608fd9 !important;
    }
  }
}
</style>